/* ================================================================
   PROJECTS PAGE
   Layout and hover mechanics only.
   Colors, fonts, spacing — add those yourself.
================================================================ */
/* body{
    width:80vw;
    margin: 0 auto;
    display: flex;
    flex-direction:column;
    gap: 20px;
    align-items:center;
    min-height: 80vh;
} */

/* ── Grid ──────────────────────────────────────────────────────
   Lays cards out in a row that wraps.
   Adjust the min() value to control how wide each card gets.
─────────────────────────────────────────────────────────────── */
#project-grid {
    padding: 10px;
    width: 80vw;
    gap: 20px;
    margin: 0 auto;
    text-align:center;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}


/* ── Card ──────────────────────────────────────────────────────
   The whole card is an <a> tag so the entire thing is clickable.
   Remove the default link underline.
─────────────────────────────────────────────────────────────── */
.project-card {
    display: block;
    text-decoration: none;
    color: inherit;
    width: 50%;
}


/* ── Card image area ───────────────────────────────────────────
   position: relative so the overlay can be stacked on top.
   overflow: hidden so nothing bleeds outside the card edges.
   
   Set a height here to control how tall the image area is,
   e.g: height: 240px;
─────────────────────────────────────────────────────────────── */
.card-image {
    position: relative;
    overflow: hidden;
    border-radius: 5px;
}


/* ── Cover image ───────────────────────────────────────────────
   Fills the full .card-image area.
   object-fit: cover keeps it from stretching.
   
   The transition fades the image out when the overlay appears.
─────────────────────────────────────────────────────────────── */
.card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.4s ease;
}


/* ── Overlay ───────────────────────────────────────────────────
   Sits on top of the image, covers the full card-image area.
   Hidden at rest (opacity: 0), revealed on hover (opacity: 1).
   
   Uses flexbox to center the text content inside it.
   
   Set background-color here to pick your overlay color,
   e.g: background-color: rgba(0, 0, 0, 0.85);
─────────────────────────────────────────────────────────────── */
.card-overlay {
    position: absolute;
    inset: 0;                       /* covers the full .card-image */
    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;                     /* hidden at rest */
    transition: opacity 0.4s ease;
}


/* ── Overlay content ───────────────────────────────────────────
   The text block centered inside the overlay.
   Style .overlay-title and .overlay-caption as you like.
─────────────────────────────────────────────────────────────── */
.card-overlay-content {
    text-align: center;
}

.overlay-caption{
    font-family: var(--mono);
    color: var(--status-gray);
}


/* ── Hover state ───────────────────────────────────────────────
   When the card is hovered:
     - The image fades out
     - The overlay fades in
─────────────────────────────────────────────────────────────── */
.project-card:hover .card-img {
    opacity: 0;
}

.project-card:hover .card-overlay {
    opacity: 1;
}


/* ── Card caption (below the image) ───────────────────────────
   Always visible. Style .card-title and .card-desc as you like.
─────────────────────────────────────────────────────────────── */
.card-caption {
    color: var(--ink);
}